<template>
  <div class="context">
    <div class="search">
      <div class="search_label">
        <span class="label">商品名称</span>
        <el-input style="margin-left:10px" size="small" v-model="search.name" placeholder="商品名称"></el-input>
      </div>
      <div class="search_label">
        <span class="label">商品显示</span>
        <el-select size="small" v-model="search.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="search_label">
        <el-button size="small" @click="reset">重置</el-button>
        <el-button type="primary" @click="searchProduct" size="small">搜索</el-button>
      </div>
    </div>
    <div class="orderBy">
      <el-radio-group @change="changeCheck" v-model="search.orderBy">
        <el-radio v-for="(item,index) in checkboxs" :key="index" :label="item.id">{{item.label}}</el-radio>
      </el-radio-group>
      <div>
        <el-button @click="importVisable=true" size="mini">导入</el-button>
        <el-button type="primary" @click="addProduct" size="mini">添加</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" border>
        <el-table-column label="ID" align="center" width="50px">
          <template slot-scope="scope">
            <span>{{scope.row.id}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">
            <el-input
              v-if="active==scope.$index"
              type="textarea"
              @blur="updateName(scope.row)"
              clearable="true"
              autosize="true"
              v-model="scope.row.name"
              placeholder="商品名称"
            ></el-input>
            <span @click="active=scope.$index" v-if="active!=scope.$index">{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <img class="img" :src="scope.row.mainImage" />
          </template>
        </el-table-column>
        <el-table-column label="商品标签" align="center">
          <template slot-scope="scope">
            <el-select
              @change="addLabel($event,scope.row.id)"
              v-model="scope.row.labelId"
              placeholder="请选择"
              clearable
            >
              <el-option v-for="item in labels" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="商品编号" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.productNo}}</span>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.price}}</span>
          </template>
        </el-table-column>
        <el-table-column label="销量" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.saleNum}}</span>
          </template>
        </el-table-column>
        <el-table-column label="库存" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.stock}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{getTime(scope.row.createTime)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="上架" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="changeShow(scope.row.id)"
              v-model="scope.row.status"
              :active-value="activeValue"
              :inactive-value="inactiveValue"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
          <template slot-scope="scope">
            <div>
              <el-button plain size="mini" @click="edit(scope.row.id,1)">编辑商品</el-button>
              <el-button plain type="success" size="mini" @click="edit(scope.row.id,2)">修改规格</el-button>
            </div>
            <div style="margin-top:10px">
              <el-button plain type="info" size="mini" @click="edit(scope.row.id,3)">修改参数</el-button>
              <el-button plain type="primary" size="mini" @click="edit(scope.row.id,4)">修改详情</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="index"
          :page-size="pageSize"
          :page-sizes="[10,20]"
          layout="total,sizes,prev, pager, next,jumper"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog title="修改商品规格" :visible.sync="skuListVisable">
        <el-table v-if="skuList.length !=0" border :data="skuList">
          <el-table-column v-for="(item,i) in skuList[0].skuName" :key="i">
            <template slot="header" slot-scope="scope">
              <span>{{item.name}}</span>
            </template>
            <template slot-scope="scope">
              <span>{{scope.row.skuName[i].value}}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" placeholder="价格"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="原价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.marketPrice" placeholder="原价"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="成本价">
            <template slot-scope="scope">
              <el-input v-model="scope.row.costPrice" placeholder="成本价"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock" placeholder="库存"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="销量">
            <template slot-scope="scope">
              <el-input v-model="scope.row.saleNum" placeholder="销量"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="上下架">
            <template slot-scope="scope">
              <el-switch
                @change="changeSkuStatus(scope.row.id)"
                v-model="scope.row.status"
                :active-value="activeValue"
                :inactive-value="inactiveValue"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="updateSku(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="修改商品参数" :visible.sync="paramsVisable">
        <div style="width:500px;margin:0 auto">
          <div style="width:100%;display:flex;justify-content:flex-end">
            <el-button type="primary" size="small" @click="addParam">添加</el-button>
          </div>
          <div style="width:500px;margin-top:30px">
            <el-table :data="paramList" border>
              <el-table-column label="参数">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.param" placeholder="参数"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="参数值">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.value" placeholder="参数值"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button type="danger" size="mini" @click="delParam(scope.$index)">删除</el-button>
                  <el-button type="primary" size="mini" @click="saveParam(scope.$index)">保存</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="修改商品详情" :visible.sync="detailVisable">
        <TinymceEditor v-model="detail" :header="header" :action="action"></TinymceEditor>
        <div class="right">
          <el-button type="primary" size="small" @click="saveDetail">保存</el-button>
        </div>
      </el-dialog>
      <el-dialog
        v-loading="loading"
        element-loading-text="解析时间长,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        title="导入商品"
        :visible.sync="importVisable"
        width="400px"
      >
        <el-form v-model="form2">
          <el-form-item label="链接">
            <el-input style="width:300px" v-model="form2.url" placeholder="商品链接" />
          </el-form-item>
          <el-form-item label="类目">
            <el-select v-model="form2.categoryId" placeholder="请选择">
              <el-option
                v-for="item in categoryOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="importProduct">导入</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list,
  changeShow,
  changeLabels,
  findSku,
  updateSku,
  changeSkuStatus,
  productParams,
  updateParams,
  productDetail,
  updateDetail,
  addFormSJS,
  updateName
} from "@/api/product.js";
import category from "@/api/category.js";
import label from "@/api/label.js";
import { getDate } from "@/utils/dateUtil.js";
import TinymceEditor from "@/components/tinymce";
import { getToken } from "@/utils/auth.js";
export default {
  components: {
    TinymceEditor
  },
  data() {
    return {
      active: -1,
      loading: false,
      categoryOptions: [],
      form2: {
        url: "",
        categoryId: null
      },
      action: "",
      header: {},
      editId: 0,
      activeValue: 0,
      inactiveValue: 1,
      importVisable: false,
      paramsVisable: false,
      detailVisable: false,
      skuListVisable: false,
      paramList: [],
      detail: "",
      product: {},
      skuList: [],
      activeValue: 0,
      inactiveValue: 1,
      search: {
        name: "",
        status: "",
        orderBy: 1
      },
      labels: [],
      options: [{ label: "显示", value: 0 }, { label: "不显示", value: 1 }],
      checkboxs: [
        { label: "创建时间", id: 1 },
        { label: "销量", id: 2 },
        { label: "库存", id: 3 },
        { label: "价格", id: 4 }
      ],
      index: 1,
      pageSize: 10,
      tableData: [],
      total: 0
    };
  },
  mounted() {
    this.action = this.$UPLOAD;
    this.header = { token: getToken() };
    this.initLabel();
    this.initCategory();
  },
  methods: {
    /**
     * 修改名称
     */
    updateName(data) {
      updateName(data.id, data.name).then(res => {
        this.$message({
          type: "success",
          message: res.message
        });
        this.active = -1;
      });
    },
    /**
     * 导入商品
     */
    importProduct() {
      if (this.form2.url == null || this.form2.url.trim() == "") {
        this.$message({
          type: "error",
          message: "请输入商品链接"
        });
        return;
      }
      if (this.form2.categoryId == null) {
        this.$message({
          type: "error",
          message: "请选择商品类目"
        });
        return;
      }
      this.$router.push({
        path: "/product/add",
        query: { url: this.form2.url, categoryId: this.form2.categoryId }
      });
    },
    /**
     * 初始化类目
     */
    initCategory() {
      category().then(res => {
        this.categoryOptions = res.data;
      });
    },
    addProduct() {
      this.$router.push({ path: "/product/add" });
    },
    saveDetail() {
      updateDetail(this.editId, this.detail).then(res => {
        this.$message({
          type: "success",
          message: res.message
        });
      });
    },
    saveParam(index) {
      if (this.paramList[index].id == null) {
        updateParams(
          1,
          null,
          this.editId,
          this.paramList[index].param,
          this.paramList[index].value
        ).then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.edit(this.editId, 3);
        });
      } else {
        updateParams(
          3,
          this.paramList[index].id,
          this.editId,
          this.paramList[index].param,
          this.paramList[index].value
        ).then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.edit(this.editId, 3);
        });
      }
    },
    delParam(index) {
      if (this.paramList[index].id == null) {
        this.paramList.splice(index, 1);
      } else {
        updateParams(2, this.paramList[index].id, null, null, null).then(
          res => {
            this.$message({
              type: "success",
              message: res.message
            });
            this.edit(this.editId, 3);
          }
        );
      }
    },
    //添加商品参数
    addParam() {
      this.paramList.push({
        param: "",
        value: ""
      });
    },
    changeSkuStatus(id) {
      changeSkuStatus(id).then(res => {
        this.edit(this.editId, 2);
        this.$message({
          type: "success",
          message: res.message
        });
      });
    },
    updateSku(data) {
      updateSku(data).then(res => {
        this.getTableData();
        this.edit(this.editId, 2);
        this.$message({
          type: "success",
          message: res.message
        });
      });
    },
    edit(id, type) {
      this.editId = id;
      if (type == 1) {
        this.$router.push({ path: "/product/add", query: { id: this.editId } });
      } else if (type == 2) {
        findSku(id).then(res => {
          this.skuList = [];
          this.skuList = res.data;
          this.skuListVisable = true;
        });
      } else if (type == 3) {
        productParams(id).then(res => {
          this.paramList = [];
          this.paramList = res.data;
          this.paramsVisable = true;
        });
      } else if (type == 4) {
        productDetail(id).then(res => {
          this.detail = "";
          this.detail = res.data;
          this.detailVisable = true;
        });
      }
    },
    changeShow(id) {
      changeShow(id).then(res => {
        this.getTableData();
        this.$message({
          type: "success",
          message: res.message
        });
      });
    },
    addLabel(id, productId) {
      changeLabels(productId, id).then(res => {
        this.getTableData();
      });
    },
    searchProduct() {
      this.getTableData();
    },
    reset() {
      this.search = {
        name: "",
        status: "",
        orderBy: ""
      };
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getTableData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getTableData();
    },
    initLabel() {
      label().then(res => {
        this.labels = res.data;
        this.getTableData();
      });
    },
    getTableData() {
      list(
        this.index,
        this.pageSize,
        this.search.name,
        this.search.status,
        this.search.orderBy
      ).then(res => {
        this.tableData = [];
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    getTime(time) {
      return getDate(time);
    },
    changeCheck(data) {
      this.getTableData();
    }
  }
};
</script>

<style>
.right {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 20px;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
.table {
  margin-top: 30px;
}
.img {
  width: 40px;
  height: 40px;
}
.context {
  min-width: 1000px;
  margin: 0 auto;
}
.search {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
}
.orderBy {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  padding: 10px 20px;
  align-items: center;
  justify-content: space-between;
}
.search_label {
  display: flex;
  flex-direction: row;
  padding: 30px 20px;
  flex: 1;
}
.label {
  width: 100px;
  color: #303133;
  font-family: "PingFang SC";
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
